<template>
	<div class="shell">
		<div class="image" style="background-image: url('/src/views/1.jpg')"></div>
		<div class="heading">
			<h1>When you are biking</h1>
		</div>
		<div class="text">
			<h1>Breathing in the muddy air</h1>
		</div>

		<div class="image" style="background-image: url('/src/views/2.jpg')"></div>
		<div class="heading">
			<h1>Have you ever thought</h1>
		</div>
		<div class="text">
			<h1>Every day you can breathe fresh air</h1>
		</div>

		<div class="image" style="background-image: url('/src/views/3.jpg')"></div>
		<div class="heading">
			<h1>Every day you can be in a happy mood</h1>
		</div>
		<div class="text">
			<h1>Every day you are no longer alone on the bike</h1>
		</div>

		<div class="image" style="background-image: url('/src/views/4.jpg')"></div>
		<div class="heading hidden-sm-and-down-">
			<h1>This is what bike sharing can show you</h1>
		</div>
		<div class="extension">Lets join us!</div>
	</div>
</template>

<style scoped>
* {
	padding: 0;
	margin: 0;
}

.extension {
	height: 50px;
	letter-spacing: 2px;
	font-size: 40px;
	font-weight: bold;
	margin-top: 240px;
}
.shell {
	height: 150vh;
	overflow-x: hidden;
	perspective: 3px;
	background-color: white;
}

.shell::-webkit-scrollbar {
	display: none;
}
.shell div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	font-style: 30px;
	letter-spacing: 2px;
}
.image {
	transform: translateZ(-1px) scale(2.6);
	background-size: cover;
	height: 40vh;
	z-index: -1;
}
.text {
	height: 30vh;
	background-color: #fff;
}
.text h1 {
	color: #000;
}
.heading {
	z-index: -1;
	transform: translateY(-1vh) translateZ(1px);
	color: #fff;
}

@media screen and (min-width: 900px) and (max-width: 2000px) {
	.heading {
		font-size: 30px;
		transform: translateY(-30vh) translateZ(1px);
	}
	.image {
		height: 100vh;
		transform: translateZ(-1px) scale(1.6);
	}
	.text {
		height: 50vh;
		background-color: #fff;
	}
	.extension {
		height: 300px;
		letter-spacing: 2px;
		font-size: 40px;
		font-weight: bold;
		padding-top: 10px;
	}
}
@media screen and (min-width: 0px) and (max-width: 900px) {
	.heading {
		font-size: 12px;
	}
}
</style>
